/* ==================
          边框
 ==================== */
 @import '../var';

 /* -- 实线 -- */
 .border {
     overflow: initial !important;
     @at-root [class*='border'],
     [class*='dashed'] {
         position: relative;
         &.dline{
             --ui-Border:var(--ui-BG-3)
         }
         &::after {
             content: ' ';
             width: 200%;
             height: 200%;
             position: absolute;
             z-index: 0;
             top: 0;
             left: 0;
             transform: scale(0.5);
             transform-origin: 0 0;
             pointer-events: none;
             box-sizing: border-box;
             border-radius: inherit;
         }
         &.radius::after {
             border-radius: calc(#{$radius} * 2);
         }
         &.round::after {
             border-radius: #{$round-pill};
         }
     }
     &::after {
         border: 1px solid var(--ui-Border);
     }
     &s::after {
         border: 4rpx solid var(--ui-Border);
     }
     &ss::after {
         border: 8rpx solid var(--ui-Border);
     }
     @each $value in (top, right, bottom, left) {
         &-#{$value}::after {
             border-#{$value}: 1px solid var(--ui-Border);
         }
         &s-#{$value}::after {
             border-#{$value}: 4rpx solid var(--ui-Border);
         }
         &ss-#{$value}::after {
             border-#{$value}: 8rpx solid var(--ui-Border);
         }
     }
 }
 /* -- 虚线 -- */
 .dashed {
     &::after {
         border: 4rpx dashed var(--ui-Border);
     }
     &s::after {
         border: 6rpx dashed var(--ui-Border);
     }
     @each $value in (top, right, bottom, left) {
         &-#{$value}::after {
             border-#{$value}: 4rpx dashed var(--ui-Border);
         }
         &s-#{$value}::after {
             border-#{$value}: 6rpx dashed var(--ui-Border);
         }
     }
 }
 @each $color, $value in map-merge($colors, map-merge($darks, $grays)) {
     .border-#{$color}::after,.border-#{$color}[class*='-shine']::before {
         border-color: $value !important;
     }
 }
 @each $value in (a, b, c, d, e) {
     .main-#{$value}-border::after,
     .main-#{$value}-border[class*='-shine']::before {
         border-color: var(--main-#{$value}) !important;
     }
 }
 .dashed-shine,
 .dasheds-shine {
     position: relative;
     overflow: hidden;
     &::after,
     &::before {
         border-style: dashed;
         border-color: var(--ui-Border);
         animation: shineafter 1s infinite linear;
         width: calc(200% + 40px);
         height: 200%;
         border-width: 2px 0;
     }
     &::before {
         content: ' ';
         position: absolute;
         transform: scale(0.5);
         transform-origin: 0 0;
         pointer-events: none;
         box-sizing: border-box;
         animation: shinebefore 1s infinite linear;
         width: 200%;
         height: calc(200% + 40px);
         border-width: 0 2px;
     }
 }
 .dasheds-shine {
     &::after,
     &::before {
         border-width: 4px 0;
     }
     &::before {
         border-width: 0 4px;
     }
 }
 
 @keyframes shineafter {
     0% {
         top: 0;
         left: -22px;
     }
     100% {
         top: 0;
         left: 0;
     }
 }
 
 @keyframes shinebefore {
     0% {
         top: -22px;
         left: 0;
     }
     100% {
         top: 0;
         left: 0;
     }
 }
 